---
import type { Author } from "../types/types";

interface Props {
  authors: Author[];
}

const { authors } = Astro.props;
---

<div class="flex flex-row gap-x-8 gap-y-4 flex-wrap justify-center">
  {
    authors.map((author) => (
      <div class="flex flex-col items-center text-center">
        <span class="text-xl flex flex-row">
          {author.url ? (
            <a href={author.url} class="">
              {author.name}
            </a>
          ) : (
            author.name
          )}
          {author.notes && (
            <sup class="text-xl">
              {author.notes.map(
                (note, index, array) =>
                  note + (index < array.length - 1 ? "," : "")
              )}
            </sup>
          )}
        </span>
        {author.institution && <p>{author.institution}</p>}
      </div>
    ))
  }
</div>
